<template>
  <div class="detail-wrapper">
    <div class="detail-info flex-y-center">
      <div class="product-info flex">
        <div class="left-info">
          <el-image
            :src="require('@/assets/img/test.png')"
            class="big-cover"
            alt=""
            :preview-src-list="[require('@/assets/img/test.png')]"
          ></el-image>
          <perfect-scrollbar>
            <div class="small-covers">
              <el-image
                :src="item"
                v-for="(item, index) in imageList"
                :key="index"
                alt=""
                class="small-cover"
                :preview-src-list="imageList"
              ></el-image>
            </div>
          </perfect-scrollbar>
          <div class="flex-y-center">
            <div class="collect flex-y-center">
              <img src="@/assets/img/icon-collect-1.png" alt="" />
              <span>收藏</span>
            </div>
            <div class="collect report flex-y-center" @click="toReport">
              <img src="@/assets/img/icon-mine10.png" alt="" />
              <span>举报</span>
            </div>
          </div>
          <div class="rules flex-y-center">
            <div>运费规则</div>
            <div>平台担保</div>
          </div>
        </div>
        <div class="right-info">
          <div class="name">山推矿山利器 全新470挖掘机</div>
          <div class="product-fields">
            <div class="row">
              <span class="title">设备位置：</span>
              <span class="content">辽宁省沈阳市</span>
            </div>
            <div class="row">
              <span class="title">设备品牌：</span>
              <span class="content">hc</span>
            </div>
            <div class="row">
              <span class="title">设备型号：</span>
              <span class="content">YG08-40</span>
            </div>
            <div class="row">
              <span class="title">出厂日期：</span>
              <span class="content">2024-40-1</span>
            </div>
            <div class="row">
              <span class="title">工作小时：</span>
              <span class="content">8h</span>
            </div>
            <div class="row">
              <span class="title">整机序列号：</span>
              <span class="content">YGW-12</span>
            </div>
            <div class="row">
              <span class="title">付款方式：</span>
              <span class="content">微信支付/银行卡支付/支付宝支付</span>
            </div>
            <div class="row">
              <span class="title">联系人：</span>
              <span class="content">张晓</span>
            </div>
            <div class="row">
              <span class="title">联系方式：</span>
              <span class="content">15632326969</span>
            </div>
            <div class="sku-list">
              <div class="sku-item" v-for="(item, index) in 10">商品规格</div>
            </div>
          </div>
          <div class="price-wrapper">
            <div class="price-box">
              <span>出售价格：</span>
              <span class="price-text">￥13884</span>
            </div>
            <!-- <div class="price-box">
              <span>出售价格：</span> 
              <span class="price-text">￥13884</span>
            </div>
            <div class="price-box" style="padding-top:30px;">
              <span>出售价格：</span> 
              <span class="price-text">￥13884</span>
            </div> -->
          </div>
          <div class="sell-num">销量：400</div>
          <div class="buy-count">
            <el-input-number
              v-model="num"
              size="small"
              @change="handleChange"
              :min="1"
              label="购买数量"
            ></el-input-number>
          </div>
          <div class="handle-btns">
            <div class="add-diff flex-xy-center" @click="addDiff">加入对比</div>
            <div class="buy-btn flex-xy-center" @click="toBuy">立即购买</div>
            <div class="phone-call flex-xy-center">
              <img src="@/assets/img/icon-phone.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="store-info">
        <div class="title">经销商</div>
        <div class="store-detail">
          <div class="flex-y-center">
            <img src="@/assets/img/logo.png" class="store-cover" />
            <span class="store-name">店铺名称</span>
          </div>
          <div class="store-fields">
            <div class="info-row">
              <span class="row-title">主营业务：</span>
              <span class="row-content">挖掘机</span>
            </div>
            <div class="info-row">
              <span class="row-title">服务区域：</span>
              <span class="row-content">辽宁省 沈阳市</span>
            </div>
            <div class="info-row">
              <span class="row-title">发布设备：</span>
              <span class="row-content">这是发布的设备</span>
            </div>
            <div class="info-row">
              <span class="row-title">成立时间：</span>
              <span class="row-content">2024-07-20</span>
            </div>
          </div>
        </div>
        <div class="to-store-btn flex-xy-center" @click="toStoreDetail">进入店铺</div>
      </div>
    </div>
    <div class="break-line">
      <div class="break-text flex-xy-center">商品参数</div>
    </div>
    <div class="params-list">
      <div class="params-table">
        <div class="params-row" v-for="(item, index) in 10" :key="index">
          <div class="params-column column-th">参数名称</div>
          <div class="params-column">名称1</div>
          <div class="params-column column-th">参数名称</div>
          <div class="params-column">名称1</div>
        </div>
      </div>
    </div>
    <div class="break-line">
      <div class="break-text flex-xy-center">商品详情</div>
    </div>
    <div class="detail-images">
      <el-image
        :src="require('@/assets/img/test.png')"
        class="detail-img"
        v-for="(item, index) in 3"
        :key="index"
      ></el-image>
    </div>

    <el-dialog
      title="提交举报"
      :visible.sync="dialogFormVisible"
      width="600px"
      center
      class="dialog"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="用户类型：">
          <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称：" prop="">
          <el-input
            type="text"
            v-model="form.username"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="举报类型：">
          <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补充说明：" prop="">
          <el-input
            type="textarea"
            v-model="form.username"
            placeholder="请输入补充说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="submit-report" @click="submitReport"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ProductDetail",

  data() {
    return {
      imageList: [
        "https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641",
        "https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg",
      ],
      num: "",
      form: {},
      dialogFormVisible: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleChange() {},
    toBuy() {
      this.$router.push("/orderSubmit/" + this.$route.name);
    },
    addDiff() {
      this.$router.push("/productDiff");
    },
    toStoreDetail() {
      this.$router.push("/storeDetail/" + this.$route.name);
    },
    toReport() {
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-wrapper {
  width: 1200px;
  margin: auto;
  background: transparent;

  .detail-info {
    .product-info {
      padding: 32px;
      width: 900px;
      box-sizing: border-box;
      background: #fff;

      .left-info {
        display: flex;
        flex-direction: column;

        .big-cover {
          width: 310px;
          height: 310px;
        }
        .ps {
          width: 310px;
        }

        ::v-deep .ps__rail-x:hover {
        }
        .small-covers {
          width: 310px;
          display: flex;
          margin-top: 7px;

          .small-cover {
            flex-shrink: 0;
            width: 66px;
            height: 66px;
            margin-right: 7px;
            margin-top: 7px;
            cursor: pointer;
            border: 2px solid transparent;
          }

          .small-cover:hover {
            border: 2px solid #fe5a13;
          }
        }

        .collect {
          font-weight: 400;
          font-size: 16px;
          color: #818181;
          padding: 20px 0;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }
        }

        .collect:hover {
          color: #fe5a13;
        }

        .rules {
          font-weight: 400;
          font-size: 16px;
          color: #818181;

          & > div:hover {
            text-decoration: underline;
            cursor: pointer;
          }

          div:first-child {
            padding-right: 35px;
          }
        }
      }

      .report {
        padding-left: 45px !important;
      }

      .right-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 310px;
        margin-left: 22px;

        .name {
          font-weight: bold;
          font-size: 28px;
          color: #333333;
          padding-bottom: 15px;
        }

        .product-fields {
          border-top: 1px solid #ededed;
          border-bottom: 1px solid #ededed;
          padding-bottom: 15px;

          .row {
            padding-top: 15px;
            font-weight: 400;
            font-size: 16px;
            color: #818181;

            .content {
              color: #333333;
            }
          }
        }

        .sku-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;

          .sku-item {
            font-weight: 400;
            font-size: 16px;
            color: #818181;
            padding: 6px 11px;
            border-radius: 6px;
            border: 1px solid #ededed;
            background: #ffffff;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
          }
        }

        .price-wrapper {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 0 0px;
          font-weight: 400;
          font-size: 16px;
          color: #818181;

          .price-box {
            width: 50%;
          }
          .price-text {
            font-weight: 400;
            font-size: 30px;
            color: #f42d1f;
          }
        }

        .sell-num {
          display: flex;
          justify-content: flex-end;
          font-weight: 400;
          font-size: 16px;
          color: #818181;
        }

        .handle-btns {
          display: flex;
          align-items: center;
          padding-top: 20px;

          .add-diff {
            width: 170px;
            height: 52px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #fe4610;
            font-weight: 400;
            font-size: 20px;
            color: #fe5a13;
            cursor: pointer;
          }

          .buy-btn {
            width: 170px;
            height: 52px;
            background: #fe5a13;
            border-radius: 4px;
            margin: 0 12px;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
            cursor: pointer;
            border: 1px solid transparent;
          }

          .phone-call {
            width: 98px;
            height: 52px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #fe4610;
            cursor: pointer;

            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }
  }

  .store-info {
    flex: 1;
    margin-left: 12px;
    background: #ffffff;
    align-self: flex-start;
    padding: 20px;

    .title {
      position: relative;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      margin-bottom: 20px;
    }

    .title::before {
      position: absolute;
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
      content: "";
      width: 4px;
      height: 18px;
      background: #f42d1f;
    }

    .store-detail {
      padding: 20px 0 10px;
      border-top: 1px solid #ededed;

      .store-cover {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin-right: 15px;
        flex-shrink: 0;
      }

      .store-name {
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }

      .store-fields {
        font-weight: 400;
        font-size: 16px;
        color: #808080;
        .info-row {
          padding-top: 20px;

          .row-title {
          }

          .row-content {
            color: #333333;
          }
        }
      }
    }

    .to-store-btn {
      cursor: pointer;
      width: 120px;
      height: 36px;
      background: #fe5a13;
      border-radius: 18px;
      font-size: 16px;
      color: #ffffff;
      margin: 20px auto 0;
    }
  }

  .break-line {
    margin-top: 30px;
    border-bottom: 4px solid #fe5a13;

    .break-text {
      width: 270px;
      height: 62px;
      background: #fe5a13;
      font-weight: 800;
      font-size: 24px;
      color: #ffffff;
    }
  }

  .params-list {
    background: #fff;
    padding: 30px;

    .params-table {
      display: table;
      width: 100%;
      border-collapse: collapse;

      .params-row {
        display: table-row;

        .params-column {
          padding: 20px 30px;
          display: table-cell;
          border: 1px solid #ededed;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }

        .column-th {
          background: #f7f7f7;
          color: #818181;
        }
      }
    }
  }

  .detail-images {
    background: #fff;
    padding: 30px;

    .detail-img {
      width: 100%;
      margin-bottom: 20px;
    }
  }
}

.dialog {
  ::v-deep .el-form-item__label {
    line-height: 56px;
    font-size: 18px;
    width: 120px;
  }

  // 设置文本框长度
  ::v-deep .el-textarea__inner,
  ::v-deep .el-input__inner {
    width: 548px;
    height: 56px;
    font-size: 18px;
  }

  ::v-deep .el-textarea > textarea {
    height: 180px;
  }

  .submit-report {
    width: 530px;
    height: 60px;
    font-weight: normal;
    font-size: 20px;
    color: #ffffff;
  }
}
</style>
